<!--智慧招商-->
<template>
    <div class="leftView">
        <div class="shrink" @click="shows=!shows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: column">
                <div style="display: flex;flex-direction: row">
                    <div class="container height294"
                         :style="{'background-image':`url(${require('@/assets/bg_left.png')})`}">
                        <div class="container_title1">
                            <span>产业链分布</span>
                        </div>
                        <div class="industrialChainStyle" ref="industrialChainEcharts"></div>
                    </div>
                    <div class="container height294"
                         :style="{'background-image':`url(${require('@/assets/bg_left.png')})`}">
                        <div class="container_title1">
                            <span>热门政策</span>
                        </div>
                        <el-scrollbar class="height230">
                            <div class="container_policy" v-for="(item,index) in hotPolicyData" :key="index">
                                <span class="container_policy_name">{{ item.policyName }}</span>
                                <div class="container_policy_types">
                <span class="container_policy_type container_policy_bg1" v-for="(tItem,tIndex) in item.tagList"
                      :key="tIndex">{{ tItem }}</span>
                                </div>
                                <div style="display: flex;flex-direction: row">
                                    <span class="container_policy_num">惠及企业：</span>
                                    <span class="container_policy_num" style="color: #1CF0BC">{{
                                        item.benefitCompanyNum
                                        }}家</span>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
                <div class="container height273"
                     :style="{'background-image':`url(${require('@/assets/bg_left1.png')})`}">
                    <div class="container_title3">
                        <span>园区产业分布</span>
                    </div>
                    <div class="industryStyle" ref="industry"></div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import pieEcharts from "echarts";
import * as echarts from "echarts";
import {hotPolicy, industrylinks, industrypark, intentionproject} from "@/api/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            hotPolicyData: [],//热门政策
            industrylinksData: [],//产业链分布
            industryparkData: [],//产业分布
            shows: true
        }
    },
    mounted() {
        this.hotPolicy()
        this.industrylinks()
        this.industrypark()
    },
    beforeDestroy() {
    },
    methods: {
        hotPolicy() {//热门政策
            var params = {
                pageNum: 1,
                pageSize: 100
            }
            hotPolicy(params).then((res) => {
                this.hotPolicyData = res.list
            })
        },
        industrylinks() {//产业链分布
            let _this = this
            industrylinks().then((res) => {
                _this.industrylinksData = []
                res.list.forEach(item => {
                    _this.industrylinksData.push({value: item.num, name: item.linkName})
                })
                console.log('_this.industrylinksData', _this.industrylinksData)
                _this.initIndustrialChain()
            })
        },
        industrypark() {//产业分布
            let _this = this
            var params = {
                parkName: '',
            }
            industrypark(params).then((res) => {
                _this.industryparkData = []
                res.forEach(item => {
                    _this.industryparkData.push({value: item.num, name: item.industryName})
                })
                _this.initIndustry()
            })
        },
        initIndustrialChain() {//初始化产业链图表
            var pieEcharts = require('echarts');
            pieEcharts.init(this.$refs.industrialChainEcharts).setOption({
                title: {
                    // 设置饼图标题，位置设为顶部居中
                    text: "",
                    left: '45%',
                    top: '10%',
                    //标题样式
                    textStyle: {
                        fontSize: 14,
                        color: "#FFFFFF",
                        fontWeight: 400,
                        fontFamily: 'PingFangSC-Medium',
                    },
                    subtext: '', // 副标题
                    subtextStyle: { // 副标题样式
                        fontSize: 28,
                        fontFamily: 'DINAlternate-Bold',
                        fontWeight: 400,
                        color: "#72D7FF",
                    },
                    textAlign: 'center',
                },
                legend: {
                    orient: 'horizontal', // 设置图例水平排列
                    align: 'auto', // 自动根据水平位置调整对齐方式
                    y: 'bottom',
                    padding: [10, 20, 20, 0],
                    icon: 'rect',
                    itemWidth: 5,
                    itemHeight: 5,
                    textStyle: {
                        color: "#ffffff", //设置文字颜色
                        fontSize: 8,
                    },
                    // data: ['新能源产业链', '新能源产业链1']
                },
                series: [
                    {
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: '#ffffff',  // 改变标示线的颜色
                                }
                            },
                            show: false
                        },
                        label: {
                            show: false,
                            // color: 'inherit',
                            color: '#ffffff',
                            formatter: '{b} ({c}家) {d}%\n\n',
                            textStyle: {//定义不同地方的文字的字体大小和颜色
                                fontSize: 8,
                            },
                            padding: [0, -18, 0, -18]
                        },
                        type: 'pie', // 设置统计图类型
                        startAngle: '0',
                        selectedMode: 'single', // 一次只能选中一个模块
                        radius: ['40%', '60%'], // 圆的大小为父类的70%
                        center: ["50%", "35%"],
                        clockwise: true,  // 逆时针开始排序
                        data: this.industrylinksData
                    },
                ]
            });
        },
        initIndustry() {//初始化产业分布
            var echarts = require('echarts');
            var option = {
                backgroundColor: "",
                title: {
                    text: "",
                    left: "center",
                    top: 0,
                    textStyle: {
                        color: "#ccc",
                    },
                },
                visualMap: {
                    show: false,
                    min: 500,
                    max: 600,
                    inRange: {
                        //colorLightness: [0, 1]
                    },
                },
                series: [
                    {
                        name: "访问来源",
                        type: "pie",
                        radius: "50%",
                        center: ["50%", "50%"],
                        data: this.industryparkData,
                        // .sort(function (a, b) {
                        //   return a.value - b.value;
                        // }),
                        // roseType: "radius",

                        label: {
                            normal: {
                                formatter: '{b} {d}%',
                                color: '#ffffff',
                                fontSize: 10
                            },
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: "#FFFFFF",
                                },
                                smooth: 0.2,
                                length: 0,
                                length2: 20,
                            },
                        },
                        itemStyle: {
                            normal: {},
                        },
                    },
                ],
            };
            echarts.init(this.$refs.industry).setOption(option)
        }
    }
}
</script>


<style lang="scss">
.height230 {
  width: 280px;
  height: 230px;
  display: flex;
  flex-direction: column;
    justify-content: space-between;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .height230 {
    height: calHeight_2k(230px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.minHeight12 {
  min-height: 12px;
  margin-bottom: 5px;
}

.height294 {
  width: 296px;
  height: 294px;
}

.height273 {
  width: 584px;
  height: 273px;
}


.leftView {
  float: left;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  height: 630px;
  align-items: center;
  position: relative;
  z-index: 3;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    &_title1 {
      width: 216px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title1.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_title3 {
      width: 526px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_policy {
      width: 222px;
      height: 52px;
      padding-left: 10px;
      margin-top: 8px;
      margin-left: 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_policy.png");

      &_name {
        height: 15px;
        font-size: 9px;
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /*超出部分省略号表示*/
        white-space: nowrap; /*强制单行显示*/
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1CFDFF;
        line-height: 15px;
      }

      &_types {
        display: flex;;
        flex-direction: row;
        min-height: 12px;
      }

      &_type {
        margin-bottom: 5px;
        width: 48px;
        display: block;
        height: 12px;
        margin-right: 5px;
        font-size: 7px;
        text-align: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 12px;
      }

      &_bg1 {
        background: linear-gradient(270deg, rgba(226, 80, 63), rgba(231, 10, 91));
      }

      &_num {
        height: 6px;
        font-size: 6px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 6px;
      }
    }
  }
}

.industrialChainStyle {
  margin-left: 5%;
  width: 90%;
  height: 230px;
}

.industryStyle {
  width: 100%;
  height: 224px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .minHeight12 {
    min-height: calHeight_2k(12px);
    margin-bottom: calHeight_2k(5px);
  }

  .height294 {
    height: calHeight_2k(294px);
  }

  .height273 {
    height: calHeight_2k(273px);
  }


  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_policy {
        height: calHeight_2k(52px);
        margin-top: calHeight_2k(8px);

        &_name {
          height: calHeight_2k(15px);
          line-height: calHeight_2k(15px);
        }

        &_types {
          min-height: calHeight_2k(12px);
        }

        &_type {
          width: calHeight_2k(48px);
          margin-bottom: calHeight_2k(5px);
          height: calHeight_2k(12px);
          line-height: calHeight_2k(12px);
        }

        &_bg1 {
        }

        &_num {
          height: calHeight_2k(6px);
          line-height: calHeight_2k(6px);
        }
      }
    }
  }

  .industrialChainStyle {
    height: calHeight_2k(230px);
  }

  .industryStyle {
    height: calHeight_2k(224px);
  }
}
</style>
